<%--
  Created by IntelliJ IDEA.
  User: 31036
  Date: 2025/4/8
  Time: 20:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="main" style="width: 1000px;height: 500px"></div>
<div id="main1" style="width: 500px;height: 500px"></div>
<div id="main2" style="width: 500px;height: 500px"></div>
</body>
</html>
<script src="../../static/js/echarts.js"></script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        yAxis: {
            type: 'category',
            data: ${list}
        },
        xAxis: {
            type: 'value'
        },
        series: [
            {
                data: ${list1},
                type: 'bar'
            }
        ]
    };

    option && myChart.setOption(option);

</script>
<script>
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: ${maps},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ${list}
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: ${list1},
                type: 'line'
            }
        ]
    };

    option && myChart.setOption(option);
</script>